<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>海洋观测系统运行状态监控</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="GuoYingxin">

	<!-- The fav icon -->
	<link rel="shortcut icon" href="icons/monitor.ico">

	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/bootstrap-cerulean.css" rel="stylesheet">

	<!-- Custom styles for this template -->
	<link href="css/font-awesome.min.css" rel="stylesheet">


	<!-- The styles -->
	<style type="text/css">
		body
		{
			padding-bottom: 40px;
		}
		.sidebar-nav
		{
			padding: 9px 0;
		}
		div.center, p.center, img.center, button.center
		{
			margin-left: auto !important;
			margin-right: auto !important;
			float: none !important;
			display: block;
			text-align: center;
		}
		.login-header
		{
			padding-top: 30px;
			height: 120px;
		}
	</style>
</head>

<body>
<div class="container-fluid">
	<div class="row-fluid">

		<div class="row-fluid">
			<div class="span12 center login-header">
				<img alt="监控icon" src="icons/monitor_48.png">
				<span style="font-size:26px;color:#0A64A4;vertical-align:middle"><b>海洋观测系统运行状态监控</b></span>
			</div>
			<!--/span-->
		</div>
		<!--/row-->

		<div class="row-fluid">
			<div class="well span5 center login-box">
				<div class="alert alert-info">
					请使用您的用户名和密码登陆
				</div>
				<form id="form" class="form-horizontal" method="post">
					<!--action="index.html"-->
					<fieldset>
						<div class="input-prepend" title="用户名" data-rel="tooltip">
							<span class="add-on" style="width:28px"><i class="icon-user"></i></span>
							<input autofocus class="input-large span10" name="username" id="username" type="text" />
							<!--value="admin"-->
						</div>
						<div class="clearfix"></div>
						<br>

						<div class="input-prepend" title="密码" data-rel="tooltip">
							<span class="add-on" style="width:28px"><i class="icon-lock"></i></span>
							<input class="input-large span10" name="password" id="password" type="password" />
							<!--value="admin123456"-->
						</div>
						<div class="clearfix"></div>
						<br>

						<div class="input-prepend">
							<label class="remember" for="remember">
								<div class="checker" id="uniform-remember">
									<input type="checkbox" id="remember" style="opacity: 1; ">记住我
								</div>
							</label>
						</div>
						<div class="clearfix"></div>
						<br>

						<p class="center">
							<button type="submit" class="btn btn-primary span4 center" onclick="checkLogin()">登陆</button>
							<!--onclick="checkLogin()"-->
						</p>
					</fieldset>
				</form>
			</div>
			<!--/span-->
		</div>
		<!--/row-->
	</div>
	<!--/fluid-row-->

</div>
<!--/.fluid-container-->

<!-- external javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script type="text/javascript">
	//全局变量声明
	//Server URL
	//    var serverURL = "http://192.168.182.48:8080/api/sql?sql=";
	var serverURL = "http://202.121.66.51:8083/api/sql?sql=";

	// Set Cookie Funtion
	function setCookie(key, value, flag)
	{
		var Days = 5;
		var exp = new Date();
		exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
		if (1 == parseInt(flag))
		{//Close ,then delete . NO date
			document.cookie = key + "=" + escape(value) + ";";
		}
		else
		{
			document.cookie = key + "=" + escape(value) + ";expires=" + exp.toGMTString();
		}
	}
	// Get Cookie Function
	function getCookie(key)
	{
		var arr = document.cookie.match(new RegExp("(^|)" + key + "=([^;]*)(;|$)"));
		if (arr != null)
		{
			return unescape(arr[2]);
		}
		return null;
	}
	// Delete Cookie
	function deleteCookie(key)
	{
		var exp = new Date();
		exp.setTime(exp.getTime() - 1);
		var cVal = getCookie(key);
		if (cVal != null)
		{
			document.cookie = key + "=" + cVal + ";expires=" + exp.toGMTString();
		}
	}
	// Login Check
	function checkLogin()
	{
		var userName = $("#username").val();
		var passwords = $("#password").val();
		if (userName == "" || userName == null)
		{
			alert("用户名不能为空！");
			$("#username").focus();
			return false;
		}
//        var loginSql = "SELECT count(*) as c FROM user where UserName=\""+userName+"\" and Passwords=\""+passwords+"\"";
//        var loginUrl = serverURL + loginSql;
//        $.ajax({
//            url:loginUrl,    //请求的url地址
//            dataType:"json",   //返回格式为json
//            async:false,//请求是否异步，默认为异步，这也是ajax重要特性
////            data:{"id":"value"},    //参数值
//            type:"GET",   //请求方式
//            success:function(req){
//                if(req[0].c == "1"){
		if (userName == 'admin' && passwords == 'admin')
		{
			setCookie("loginUser", userName, 1);
			var checkbox = $('#remember');
			if (checkbox.prop('checked'))
			{
				setCookie("savedUsername", userName, 2);
				setCookie("savedPassword", passwords, 2);
				setCookie("login", "true", 1);
			}
			document.getElementById("form").action = "index.html";
		}
//                }else{
//                    alert("用户名或密码错误！");
//                }
//            },
//            error:function(){
//                //请求出错处理
//                alert("登录失败，请检查！");
//            }
//        });
	}
	function initForm()
	{
		var checkbox = $('#remember'),
				userField = $('#username'),
				userPass = $("#password");
		key = 'savedUsername',
				passKey = "savedPassword",
				username = getCookie(key),
				userpassword = getCookie(passKey);
		if (username)
		{
			userField.val(username);
			userPass.val(userpassword);
			checkbox.prop('checked', true);
			$('#password').focus();
		}
		else
		{
			userField.val('').focus();
			checkbox.prop('checked', false);
		}
	}
	$(document).ready(function ()
	{
		initForm();
	})
</script>
</body>
</html>